<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>用户管理</title>
    <meta name="decorator" content="default"/>
</head>
<body>
<ul class="nav nav-tabs">
    <li class="active"><a href="${ctx}/sys/user/">用户列表</a></li>
    <shiro:hasPermission name="sys:user:edit"><li><a href="${ctx}/sys/user/form">用户添加</a></li></shiro:hasPermission>
</ul>

<!-- 0:隐藏tip, 1隐藏box,不设置显示全部 -->

<script type="text/javascript">top.$.jBox.closeTip();</script>

<!-- 查询条件 -->

        <form id="searchForm" class="form-horizontal" style="padding: 10px " action="${ctx}/sys/user/list" method="post">
            <input id="pageNo" name="pageNo" type="hidden" value="1"/>
            <input id="pageSize" name="pageSize" type="hidden" value="10"/>


            <input id="orderBy" name="orderBy" type="hidden" value=""/>

            <script type="text/javascript">
                $(document).ready(function () {
                    var orderBy = $("#orderBy").val().split(" ");
                    $(".sort-column").each(function () {
                        $(this).html($(this).html() + " <i class=\"fa fa-sort\"></i>");
                    });
                    $(".sort-column").each(function () {
                        if ($(this).hasClass(orderBy[0])) {
                            orderBy[1] = orderBy[1] && orderBy[1].toUpperCase() == "DESC" ? "down" : "up";
                            $(this).find("i").remove();
                            $(this).html($(this).html() + " <i class=\"fa fa-sort-" + orderBy[1] + "\"></i>");
                        }
                    });
                    $(".sort-column").click(function () {
                        var order = $(this).attr("class").split(" ");
                        var sort = $("#orderBy").val().split(" ");
                        for (var i = 0; i < order.length; i++) {
                            if (order[i] == "sort-column") {
                                order = order[i + 1];
                                break;
                            }
                        }
                        if (order == sort[0]) {
                            sort = (sort[1] && sort[1].toUpperCase() == "DESC" ? "ASC" : "DESC");
                            $("#orderBy").val(order + " DESC" != order + " " + sort ? "" : order + " " + sort);
                        } else {
                            $("#orderBy").val(order + " ASC");
                        }
                        sortOrRefresh();
                    });
                });
            </script>
            <!-- 支持排序 -->
            <div class="form-group">
                <span>归属公司：</span>


                <input id="companyId" name="company.id" class=" form-control input-sm" type="hidden" value=""/>

                <div class="input-group">
                    <input id="companyName" name="company.name" readonly="readonly" type="text" value=""
                           data-msg-required=""
                           class=" form-control input-sm" style=""/>
       		 <span class="input-group-btn">
	       		 <button type="button" id="companyButton" class="btn  btn-sm   btn-primary  "><i
                         class="fa fa-search"></i>
                 </button>
       		 </span>

                </div>
                <label id="companyName-error" class="error" for="companyName" style="display:none"></label>
                <script type="text/javascript">
                    $("#companyButton, #companyName").click(function () {
                        // 是否限制选择，如果限制，设置为disabled
                        if ($("#companyButton").hasClass("disabled")) {
                            return true;
                        }
                        // 正常打开
                        top.layer.open({
                            type: 2,
                            area: ['300px', '420px'],
                            title: "选择公司",
                            ajaxData: {selectIds: $("#companyId").val()},
                            content: "${ctx}/tag/treeselect?url=" + encodeURIComponent("/sys/office/treeData?type=1") + "&module=&checked=&extId=&isAll=",
                            btn: ['确定', '关闭']
                            , yes: function (index, layero) { //或者使用btn1
                                var tree = layero.find("iframe")[0].contentWindow.tree;//h.find("iframe").contents();
                                var ids = [], names = [], nodes = [];
                                if ("" == "true") {
                                    nodes = tree.getCheckedNodes(true);
                                } else {
                                    nodes = tree.getSelectedNodes();
                                }
                                for (var i = 0; i < nodes.length; i++) {//
                                    ids.push(nodes[i].id);
                                    names.push(nodes[i].name);//
                                    break; // 如果为非复选框选择，则返回第一个选择
                                }
                                $("#companyId").val(ids.join(",").replace(/u_/ig, ""));
                                $("#companyName").val(names.join(","));
                                $("#companyName").focus();
                                top.layer.close(index);
                            },
                            cancel: function (index) { //或者使用btn2
                                //按钮【按钮二】的回调
                            }
                        });

                    });
                </script>
                <span>登录名：</span>
                <input id="loginName" name="loginName" class=" form-control input-sm" type="text" value=""
                       maxlength="50"/>
                <span>归属部门：</span>


                <input id="officeId" name="office.id" class=" form-control input-sm" type="hidden" value=""/>

                <div class="input-group">
                    <input id="officeName" name="office.name" readonly="readonly" type="text" value=""
                           data-msg-required=""
                           class=" form-control input-sm" style=""/>
       		 <span class="input-group-btn">
	       		 <button type="button" id="officeButton" class="btn  btn-sm   btn-primary  "><i
                         class="fa fa-search"></i>
                 </button>
       		 </span>

                </div>
                <label id="officeName-error" class="error" for="officeName" style="display:none"></label>
                <script type="text/javascript">
                    $("#officeButton, #officeName").click(function () {
                        // 是否限制选择，如果限制，设置为disabled
                        if ($("#officeButton").hasClass("disabled")) {
                            return true;
                        }
                        // 正常打开
                        top.layer.open({
                            type: 2,
                            area: ['300px', '420px'],
                            title: "选择部门",
                            ajaxData: {selectIds: $("#officeId").val()},
                            content: "${ctx}/tag/treeselect?url=" + encodeURIComponent("/sys/office/treeData?type=2") + "&module=&checked=&extId=&isAll=",
                            btn: ['确定', '关闭']
                            , yes: function (index, layero) { //或者使用btn1
                                var tree = layero.find("iframe")[0].contentWindow.tree;//h.find("iframe").contents();
                                var ids = [], names = [], nodes = [];
                                if ("" == "true") {
                                    nodes = tree.getCheckedNodes(true);
                                } else {
                                    nodes = tree.getSelectedNodes();
                                }
                                for (var i = 0; i < nodes.length; i++) {//
                                    if (nodes[i].isParent) {
                                        //top.$.jBox.tip("不能选择父节点（"+nodes[i].name+"）请重新选择。");
                                        //layer.msg('有表情地提示');
                                        top.layer.msg("不能选择父节点（" + nodes[i].name + "）请重新选择。", {icon: 0});
                                        return false;
                                    }//
                                    ids.push(nodes[i].id);
                                    names.push(nodes[i].name);//
                                    break; // 如果为非复选框选择，则返回第一个选择
                                }
                                $("#officeId").val(ids.join(",").replace(/u_/ig, ""));
                                $("#officeName").val(names.join(","));
                                $("#officeName").focus();
                                top.layer.close(index);
                            },
                            cancel: function (index) { //或者使用btn2
                                //按钮【按钮二】的回调
                            }
                        });

                    });
                </script>
                <span>姓&nbsp;&nbsp;&nbsp;名：</span>
                <input id="name" name="name" class=" form-control input-sm" type="text" value="" maxlength="50"/>

            </div>
        </form>
        <br/>
    </div>
</div>

<!-- 工具栏 -->
<div class="row">
    <div class="col-sm-12">
        <div class="pull-left">


            <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" onclick="add()" title="添加">
                <i class="fa fa-plus"></i> 添加
            </button>

            <script type="text/javascript">
                function add() {
                    openDialog("新增" + '用户', "${ctx}/sys/user/form", "800px", "620px", "officeContent");
                }
            </script>
            <!-- 增加按钮 -->


            <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" onclick="edit()"
                    title="修改"><i class="fa fa-file-text-o"></i> 修改
            </button>
            </button>

            <script type="text/javascript">
                $(document).ready(function () {
                    $('#contentTable thead tr th input.i-checks').on('ifChecked', function (event) { //ifCreated 事件应该在插件初始化之前绑定
                        $('#contentTable tbody tr td input.i-checks').iCheck('check');
                    });

                    $('#contentTable thead tr th input.i-checks').on('ifUnchecked', function (event) { //ifCreated 事件应该在插件初始化之前绑定
                        $('#contentTable tbody tr td input.i-checks').iCheck('uncheck');
                    });

                });

                function edit() {

                    var size = $("#contentTable tbody tr td input.i-checks:checked").size();
                    if (size == 0) {
                        top.layer.alert('请至少选择一条数据!', {icon: 0, title: '警告'});
                        return;
                    }

                    if (size > 1) {
                        top.layer.alert('只能选择一条数据!', {icon: 0, title: '警告'});
                        return;
                    }
                    var id = $("#contentTable tbody tr td input.i-checks:checkbox:checked").attr("id");
                    openDialog("修改" + '用户', "${ctx}/sys/user/form?id=" + id, "800px", "680px", "officeContent");
                }
            </script>
            <!-- 编辑按钮 -->


            <button class="btn btn-white btn-sm" onclick="deleteAll()" data-toggle="tooltip" data-placement="top"><i
                    class="fa fa-trash-o"> 删除</i>
            </button>

            <script type="text/javascript">
                $(document).ready(function () {
                    $('#contentTable thead tr th input.i-checks').on('ifChecked', function (event) { //ifCreated 事件应该在插件初始化之前绑定
                        $('#contentTable tbody tr td input.i-checks').iCheck('check');
                    });

                    $('#contentTable thead tr th input.i-checks').on('ifUnchecked', function (event) { //ifCreated 事件应该在插件初始化之前绑定
                        $('#contentTable tbody tr td input.i-checks').iCheck('uncheck');
                    });

                });

                function deleteAll() {

                    // var url = $(this).attr('data-url');
                    var str = "";
                    var ids = "";
                    $("#contentTable tbody tr td input.i-checks:checkbox").each(function () {
                        if (true == $(this).is(':checked')) {
                            str += $(this).attr("id") + ",";
                        }
                    });
                    if (str.substr(str.length - 1) == ',') {
                        ids = str.substr(0, str.length - 1);
                    }
                    if (ids == "") {
                        top.layer.alert('请至少选择一条数据!', {icon: 0, title: '警告'});
                        return;
                    }
                    top.layer.confirm('确认要彻底删除数据吗?', {icon: 3, title: '系统提示'}, function (index) {
                        window.location = "${ctx}/sys/user/deleteAll?ids=" + ids;
                        top.layer.close(index);
                    });


                }
            </script>
            <!-- 删除按钮 -->


            <button id="btnImport" class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left" title="导入">
                <i class="fa fa-folder-open-o"></i> 导入
            </button>
            <div id="importBox" class="hide">
                <form id="importForm" action="${ctx}/sys/user/import" method="post" enctype="multipart/form-data"
                      style="padding-left:20px;text-align:center;" onsubmit="loading('正在导入，请稍等...');"><br/>
                    <input id="uploadFile" name="file" type="file" style="width:330px"/>导入文件不能超过5M，仅允许导入“xls”或“xlsx”格式文件！<br/>　　


                </form>
            </div>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#btnImport").click(function () {
                        top.layer.open({
                            type: 1,
                            area: [500, 300],
                            title: "导入数据",
                            content: $("#importBox").html(),
                            btn: ['下载模板', '确定', '关闭'],
                            btn1: function (index, layero) {
                                window.location.href = '${ctx}/sys/user/import/template';
                            },
                            btn2: function (index, layero) {
                                var inputForm = top.$("#importForm");
                                var top_iframe = top.getActiveTab().attr("name");//获取当前active的tab的iframe
                                inputForm.attr("target", top_iframe);//表单提交成功后，从服务器返回的url在当前tab中展示
                                top.$("#importForm").submit();
                                top.layer.close(index);
                            },

                            btn3: function (index) {
                                top.layer.close(index);
                            }
                        });
                    });

                });

            </script>
            <!-- 导入按钮 -->


            <button id="btnExport" class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left" title="导出">
                <i class="fa fa-file-excel-o"></i> 导出
            </button>
            <script type="text/javascript">
                $(document).ready(function () {

                    $("#btnExport").click(function () {
                        top.layer.confirm('确认要导出Excel吗?', {icon: 3, title: '系统提示'}, function (index) {
                            //do something
                            //导出之前备份
                            var url = $("#searchForm").attr("action");
                            var pageNo = $("#pageNo").val();
                            var pageSize = $("#pageSize").val();
                            //导出excel
                            $("#searchForm").attr("action", "${ctx}/sys/user/export");
                            $("#pageNo").val(-1);
                            $("#pageSize").val(-1);
                            $("#searchForm").submit();

                            //导出excel之后还原
                            $("#searchForm").attr("action", url);
                            $("#pageNo").val(pageNo);
                            $("#pageSize").val(pageSize);
                            top.layer.close(index);
                        });
                    });

                });


            </script>
            <!-- 导出按钮 -->

            <button class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left" onclick="sortOrRefresh()"
                    title="刷新"><i class="glyphicon glyphicon-repeat"></i> 刷新
            </button>

        </div>
        <div class="pull-right">
            <button class="btn btn-primary btn-rounded btn-outline btn-sm " onclick="search()"><i
                    class="fa fa-search"></i> 查询
            </button>
            <button class="btn btn-primary btn-rounded btn-outline btn-sm " onclick="reset()"><i
                    class="fa fa-refresh"></i> 重置
            </button>
        </div>



<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
    <thead>
    <tr>
        <th>归属公司</th>
        <th>归属部门</th>
        <th class="sort-column login_name">登录名</th>
        <th class="sort-column name">姓名</th>
        <th>电话</th>
        <th>手机</th>
        <%--<th>角色</th> --%><shiro:hasPermission name="sys:user:edit">
        <th>操作</th>
        </shiro:hasPermission></tr>
    </thead>
    <tbody>
    <c:forEach items="${page.list}" var="user">
        <tr>
            <td>${user.company.name}</td>
            <td>${user.office.name}</td>
            <td><a href="${ctx}/sys/user/form?id=${user.id}">${user.loginName}</a></td>
            <td>${user.name}</td>
            <td>${user.phone}</td>
            <td>${user.mobile}</td>
                <%--
                                <td>${user.roleNames}</td> --%>
            <shiro:hasPermission name="sys:user:edit">
                <td>
                    <a href="${ctx}/sys/user/form?id=${user.id}">修改</a>
                    <a href="${ctx}/sys/user/delete?id=${user.id}"
                       onclick="return confirmx('确认要删除该用户吗？', this.href)">删除</a>
                </td>
            </shiro:hasPermission>
        </tr>
    </c:forEach>
    </tbody>
</table>
<div class="pagination">${page}</div>
</body>
</html>